import React, { useState } from 'react';
import { View, StyleSheet, Pressable } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const ListItemTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 20 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        row: { flexDirection: 'column', gap: 12 },
        inline: { flexDirection: 'row', alignItems: 'center', gap: 12 },
        borderedWrap: { borderWidth: 1, borderColor: colors.border, padding: 8, borderRadius: 8 },
    });

    const [lastPressed, setLastPressed] = useState<string>('暂无');

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'ListItem 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="ListItemTestScreen"
        >
            {/* 基础：title + description */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>仅标题与描述文本</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem title="标题一" description="这是描述信息" testID="listitem-basic-1" />
                        <UI.ListItem title="标题二（无描述）" testID="listitem-basic-2" />
                    </View>
                </Layout.Card>
            </View>

            {/* 左右区块：left/right（使用 Icon） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>左右区块</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>left/right 可渲染任意 ReactNode</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="个人中心"
                            description="管理个人信息"
                            left={<UI.Icon name="person" color="primary" />}
                            right={<UI.Icon name="chevron-forward" color="textSecondary" />}
                            testID="listitem-left-right"
                        />
                        <UI.ListItem
                            title="设置"
                            description="系统偏好设置"
                            left={<UI.Icon name="settings" color="secondary" />}
                            right={
                                <Pressable onPress={() => setLastPressed('settings-right-pressed')}>
                                    <UI.Icon name="ellipsis-horizontal" color="text" />
                                </Pressable>
                            }
                            testID="listitem-left-right-pressable"
                        />
                        <UI.Text variant="body1" color="textSecondary">最近右侧点击：{lastPressed}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 交互：onPress + disabled */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>交互与禁用</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>禁用后降低不透明度且不触发 onPress</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="可点击项"
                            description="点击更新状态"
                            onPress={() => setLastPressed('listitem-onpress')}
                            testID="listitem-onpress"
                        />
                        <UI.ListItem
                            title="禁用项"
                            description="不可点击"
                            disabled
                            onPress={() => setLastPressed('should-not-fire')}
                            testID="listitem-disabled"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 选中态：selected（默认背景与主色边框） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>选中态</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>selected 显示 surface 背景与主色边框</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem title="未选中项" description="边框为边界色" selected={false} testID="listitem-selected-false" />
                        <UI.ListItem title="选中项" description="边框为主色" selected testID="listitem-selected-true" />
                    </View>
                </Layout.Card>
            </View>

            {/* 样式：contentStyle/titleStyle/descriptionStyle */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>内容样式</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>自定义内容容器与文本样式</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="自定义标题样式"
                            description="标题加粗、加大"
                            titleStyle={{ fontSize: 18 }}
                            descriptionStyle={{ color: colors.textSecondary }}
                            contentStyle={{ alignItems: 'flex-start' }}
                            testID="listitem-style-title-desc"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* ReactNode 标题与描述 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>ReactNode 标题与描述</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>直接传入自定义节点，绕过默认排版</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title={<UI.Text variant="h4" color="primary">自定义节点标题</UI.Text>}
                            description={<UI.Text variant="caption" color="warning">自定义节点描述</UI.Text>}
                            left={<UI.Icon name="flame" color="error" />}
                            right={<UI.Icon name="star" color="success" />}
                            testID="listitem-node-title-desc"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 间距：SpacingProps */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>m/mh/mv/p/ph/pv 展示</UI.Text>
                    <View style={[styles.row, styles.borderedWrap]}>
                        <UI.ListItem title="m=8" m={8} testID="listitem-spacing-m-8" />
                        <UI.ListItem title="mh=12" mh={12} testID="listitem-spacing-mh-12" />
                        <UI.ListItem title="mv=12" mv={12} testID="listitem-spacing-mv-12" />
                        <UI.ListItem title="p=8" p={8} testID="listitem-spacing-p-8" />
                        <UI.ListItem title="ph=12" ph={12} testID="listitem-spacing-ph-12" />
                        <UI.ListItem title="pv=12" pv={12} testID="listitem-spacing-pv-12" />
                    </View>
                </Layout.Card>
            </View>

            {/* 盒子样式：BoxProps（背景/边框/圆角/尺寸） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>盒子样式</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>覆盖背景、边框、圆角与宽高（BoxProps 会覆盖默认边框）</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="filled + 边框"
                            selected
                            backgroundColor={colors.surface}
                            borderWidth={2}
                            borderColor={colors.primary}
                            borderRadius={16}
                            width={'100%'}
                            testID="listitem-box-filled-border"
                        />
                        <UI.ListItem
                            title="outline + 自定义边框"
                            backgroundColor="transparent"
                            borderWidth={2}
                            borderColor="#90CAF9"
                            borderRadius={20}
                            width={'100%'}
                            testID="listitem-box-outline-border"
                        />
                        <UI.ListItem
                            title="ghost + 透明背景"
                            backgroundColor="transparent"
                            borderWidth={1}
                            borderColor={colors.border}
                            borderRadius={12}
                            width={'100%'}
                            testID="listitem-box-ghost-transparent"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 新增：圆角与背景（多种半径与背景色演示） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>圆角与背景</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>分别展示不同圆角半径与背景颜色</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="radius=0, surface 背景"
                            description="方形，无圆角"
                            backgroundColor={colors.surface}
                            borderRadius={0}
                            testID="listitem-radius-0-bg-surface"
                        />
                        <UI.ListItem
                            title="radius=8, 自定义浅蓝背景"
                            description="#E3F2FD"
                            backgroundColor="#E3F2FD"
                            borderRadius={8}
                            testID="listitem-radius-8-bg-custom"
                        />
                        <UI.ListItem
                            title="radius=16, 选中态"
                            description="圆角与选中边框"
                            selected
                            backgroundColor={colors.surface}
                            borderRadius={16}
                            testID="listitem-radius-16-selected"
                        />
                        <UI.ListItem
                            title="radius=24, 柔和浅橙背景 + 细边框"
                            description="#FFF3E0 + border"
                            backgroundColor="#FFF3E0"
                            borderWidth={1}
                            borderColor={colors.border}
                            borderRadius={24}
                            testID="listitem-radius-24-bg-soft"
                        />
                        <UI.ListItem
                            title="radius=999, 胶囊圆角"
                            description="极大圆角，近似胶囊"
                            backgroundColor={colors.surface}
                            borderRadius={999}
                            testID="listitem-radius-999-capsule"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 可达性与命中区域 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>可达性与命中区域</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>自定义可达性标签与扩大点击区域</UI.Text>
                    <View style={styles.row}>
                        <UI.ListItem
                            title="可达性条目"
                            description="辅助功能标签与提示"
                            accessibilityLabel="列表条目：可访问名称"
                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                            onPress={() => setLastPressed('accessible-item-pressed')}
                            testID="listitem-accessibility-hitslop"
                        />
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default ListItemTestScreen;